
{extend name='public/layui' /}

{block name="content"}

<link rel="stylesheet" href="__BCSS__/fileCommon.css">
<style >
    @media screen and (max-width: 420px) {
        .btnDiv {
            padding-top: 30px;
            text-align: left;
        }
    }
    .showBB .bottomBar {
        display: block;
    }
</style >


<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layadmin-homepage-pad-ver" style="text-align: left">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload">上传附件</button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="file-list">
                            {volist name="data.data" id="vo" empty="暂无附件"}
                            <div class="file-list-item"  data-url="{$vo['att_dir']}" data-name="{$vo['name']}" data-ext="{$vo['ext']}"   data-title="{$vo['name']}">
                                <div class="file-list-img media " data-id="{$vo['id']}" >
                                    {in name='$vo.ext' value="zip,rar,7z"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/zip.png" />
                                    {/in}

                                    {eq name='$vo.ext' value="xls,xlsx"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/xls.png" />
                                    {/eq}
                                    {eq name='$vo.ext' value="doc,docx"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/doc.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="pdf"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/pdf.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="mp3"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/mp3.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="ppt"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/ppt.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="txt"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/txt.png" />
                                    {/eq}

                                    {in name='$vo.ext' value="mp4,mvw"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/mp4.png" />
                                    {/in}


                                    {eq name='$vo.ext' value="apk"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/apk.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="exe"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/exe.png" />
                                    {/eq}

                                    {eq name='$vo.ext' value="xmind"}
                                    <img class="lazy" alt="ss" data-original="__OTHER__/ico/xmind.png" />
                                    {/eq}

                                </div>
                                <div class="file-list-name">{$vo['name']}</div>
                                <div class="file-list-ck layui-form">
                                    <input type="radio" name="imgCk" value="{$vo['att_dir']}" lay-skin="primary" />
                                </div>
                            </div>
                            {/volist}
                        </div>

                        <!--分页开始-->
                        <div class="layui-row" style="text-align: center;">
                            {$page|raw}
                        </div>
                        <!--分页结束-->

                        <div class="layui-form-item" >
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0px;text-align: right;">
                                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="add">使用选中的附件</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>

<script type="text/javascript" src=__JS__/jquery.lazyload.min.js?v=1.9.1"></script>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({effect: "fadeIn",threshold: 100});
    });
</script>

<script>

    layui.use(['jquery', 'layer', 'element', 'upload',  'util' ,'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var util = layui.util;
        var form = layui.form;

        form.render();

        var mUrl; //素材地址
        var show; //素材类型
        var names; //原始名称
        var _id; //素材id
        // 列表点击事件
        $('body').on('click', '.file-list-item > .file-list-img', function (e) {

        });

        upload.render({
            elem: '#upload'
            ,url: "{:url('admin/common/UpFile')}" //上传地址
            ,accept: 'file'
            ,exts: 'zip|rar|pdf|txt|doc|docx|ppt|xls|xlsx'
            ,size: 1024*20 //最大允许上传的文件大小
            ,before: function(obj){
                //预读本地文件
            }
            ,done: function(data){
                //上传完毕回调
                if (data.code==1){
                    layer.msg(data.msg, {icon: 1, time: 1000},function () {
                        //上传成功
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });


        form.on('submit(add)', function (data) {
            var val=$('input:radio[name=imgCk]:checked').val();
            console.log(val);
            if (val==undefined || val===""){
                layer.msg("请选择一个附件",{kin: 'layui-layer-lan', icon:5,time:1500,shade:0.7});
                return  false;
            }
            var parentinputname = '{$Request.param.fodder}';
            parent.$f.changeField(parentinputname,val);
            parent.$f.closeModal(parentinputname);
        });

    });
</script>


{/block}